<template>
    <div>customRef</div>
    <input type="text" v-model="keyword">
    <p>{{ keyword }}</p>
</template>

<script>


import {customRef} from "vue";


// 自定义ref
function useDebouncedRef(value, delay = 200) {
    // 准备存储定时器id的变量
    let timeOutId
    return customRef((track, trigger) => {
        return {
            get() {
                // 追踪数据
                track()
                return value;
            },
            set(newValue) {
                // 清理定时器
                clearTimeout(timeOutId)
                // 开启定时器
                timeOutId = setTimeout(() => {
                    value = newValue
                    // 更新界面
                    trigger()
                }, delay)
                console.log(timeOutId)
            }
        }
    })
}

export default {
    name: "App",
    setup() {
        // let keyword = ref("abc")

        const keyword = useDebouncedRef("abc", 500)
        return {
            keyword
        }
    }
}


</script>

<style>

</style>